import { getCurrentInstance, onMounted, onUnmounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';

export default function importConfig(props) {
  const { width, height, chartData } = props;
  const myEcharts = echarts;

  onMounted(() => {
    setTimeout(() => {
      initChart();
    }, 100);
  });

  onUnmounted(() => {
    myEcharts.dispose;
  });

  function initChart() {
    const chart = myEcharts.init(document.getElementById('pieChart'), 'purple-passion');
    const opt1 = {
      legend: {
        top: 'bottom',
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [40, 110],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8,
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' },
          ],
        },
      ],
    };
    chart.setOption(opt1);

    window.addEventListener('resize', function () {
      chart.resize();
    });
  }

  return {};
}
